<template>
  <view class="box-bg">
    <uni-nav-bar 
      shadow 
      color="#F7F7F7" 
      left-icon="left" 
      backgroundColor="#3485FD" 
      height="65px" 
      title="待支付订单" 
      @clickLeft="back" 
    />
  </view>
  <view style="margin-top:300rpx">
    <view class="box" v-for="item in daizhifu" :key="item.id">
      <view class="list">
        <view class="title">
          <view class="left">
            <text>订单信息</text>
          </view>
          <view class="right">
            <text> 待支付</text>
          </view>
        </view>
        <view class="container">
          <view class="container_left">
            <view>订单号: &nbsp 4545144244544</view>
            <view>服务项目: &nbsp {{ item.type }}</view>
            <view>服务门店: &nbsp {{ item.name }}<i class="iconfont icon-gaodeditu"></i></view>
            <view>下单时间: &nbsp {{ item.time }}</view>
            <view>预约时间: &nbsp {{ item.time }}</view>
            <view>车辆: &nbsp 兰博基尼WGC</view>
            <view>备注: &nbsp </view>
          </view>
        </view>
        <hr />

        <view class="title">
          <view class="left">
            <text>订单详情</text>
          </view>
        </view>
        <view class="container2">
          <view class="order_info"><view>车辆精洗</view><view>$93.9</view></view>
          <view class="order_info"><view>车辆附加费用</view><view>0</view></view>
          <view class="order_info"><view>原价</view><view>$93.9</view></view>
          <view class="order_info"><view>店家优惠</view><view style="color: rgb(255, 125, 89)">- $3.9</view></view>
          <view class="order_info"><view>优惠卷</view><view style="color: rgb(255, 125, 89)">- $3.9</view></view>
          <view class="order_info"><view>支付金额</view><view style="color: rgb(127, 221, 155)">$3.9</view></view>
        </view>
      </view>
    </view>
    <view class="goods-carts">
      <view class="goods-carts-1" @click="handleContact">
        <i style="color: #4e9cfe; font-size: 36rpx" class="iconfont color-a-kefufuwu"></i>
        <text class="goods-carts-1-1">联系客服</text>
      </view>
      <view class="goods-carts-2" @click="cancelOrder">
        <view class="goods-carts-2-1">取消订单</view>
      </view>
      <view class="goods-carts-3" @click="submitOrder">
        <view class="goods-carts-3-1">提交订单</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const daizhifu = ref([
  {
    id: 1,
    ordernum: "2546554125",
    type: "车辆保养",
    name: "大宝汽车维修店",
    time: "2020-1-1 12:11",
    price: "￥100",
    state: "待支付",
    btn1: "取消订单",
    btn2: "立即支付",
  },
]);

// 返回上一页
const back = () => {
  uni.navigateBack();
};

// 联系客服
const handleContact = () => {
  uni.showModal({
    title: '联系客服',
    content: '请拨打客服热线：400-123-4567',
    showCancel: false
  });
};

// 取消订单
const cancelOrder = () => {
  uni.showModal({
    title: '确认取消',
    content: '您确定要取消该订单吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用取消订单API
        uni.showToast({
          title: '订单已取消',
          icon: 'success'
        });
      }
    }
  });
};

// 提交订单（支付）
const submitOrder = () => {
  uni.navigateTo({
    url: '' + daizhifu.value[0].id
  });
};
</script>

<style scoped>
	.box-bg{
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 1000;
		}
.box {
  position: relative;
  bottom: 150rpx;
}
.list {
  margin: 10rpx auto;
  background-color: #fff;
  width: 80%;
  padding: 0 30rpx;
  border-radius: 30rpx;
  overflow: hidden;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  font-size: 36rpx;
  border-bottom: 3px solid #f5f5f5;
}
.title .left {
  font-weight: 550;
}
.title .right {
  color: rgb(255, 125, 89);
  font-size: 28rpx;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #f5f5f5;
}
hr {
  border: 1px solid #f5f5f5;
}
.container_left view {
  margin: 16rpx 0;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.bottom .u-button {
  border-radius: 20rpx;

  margin: 20rpx 10rpx;
}
.icon-gaodeditu {
  margin: 0 10rpx;
}
.order_info {
  width: 100%;
  height: 60rpx;
  margin: 20rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4rpx solid #f5f5f5;
}

.goods-carts {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  padding: 0 20rpx;
}

.goods-carts-1 {
  display: flex;
  align-items: center;
}

.goods-carts-1-1 {
  font-size: 30rpx;
  margin-left: 10rpx;
}

.goods-carts-2 {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.goods-carts-2-1 {
  font-size: 30rpx;
  width: 200rpx;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  color: white;
  background-color: rgb(191, 191, 191);
  border-radius: 35rpx;
}

.goods-carts-3 {
  display: flex;
  align-items: center;
  background-color: #4e9cfe;
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  justify-content: center;
}

.goods-carts-3-1 {
  font-size: 30rpx;
  color: white;
}
</style>